
/* custom google map */

document.addEventListener("DOMContentLoaded", function () {
    // Initialize map
    var map = L.map('map').setView([21.7679, 78.8718], 7);

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Marker data
    var locations = [
        {
            coords: [23.0225, 72.5714],
            id: 0,
            title: 'Ahmedabad',
            details: `
                        <button>LTL: 12345457Fgt345gh</button>
                        <p><span>Status: </span>Loaded from dock</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #12</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        },
        {
            coords: [22.3072, 73.1812],
            id: 1,
            title: 'Vadodara',
            details: `
                        <button>LTL: 98765432HJK345</button>
                        <p><span>Status: </span>In Transit</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #34</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        },
        {
            coords: [23.17250, 79.9351],
            id: 2,
            title: 'Jabalpur',
            details: `
                        <button>LTL: 98765432HJK345</button>
                        <p><span>Status: </span>In Transit</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #34</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        },
        {
            coords: [21.4679, 83.9812],
            id: 3,
            title: 'Sambalpur',
            details: `
                        <button>LTL: 98765432HJK345</button>
                        <p><span>Status: </span>In Transit</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #34</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        },
        {
            coords: [20.4612, 85.8856],
            id: 4,
            title: 'Cuttack',
            details: `
                        <button>LTL: 98765432HJK345</button>
                        <p><span>Status: </span>In Transit</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #34</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        },
        {
            coords: [21.1514, 79.0955],
            id: 5,
            title: 'Nagpur',
            details: `
                        <button>LTL: 98765432HJK345</button>
                        <p><span>Status: </span>In Transit</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #34</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        },
        {
            coords: [22.7276, 75.8514],
            id: 6,
            title: 'Indore',
            details: `
                        <button>LTL: 98765432HJK345</button>
                        <p><span>Status: </span>In Transit</p>
                        <figure><img src="images/map-placeholder.png" alt="Placeholder"></figure>
                        <h4>Loading dock #34</h4>
                        <a href="javascript:;" class="readmore dark">Details <i class="bi bi-arrow-right-short"></i></a>
                    `
        }
        // Add more locations as needed
    ];

    // Define red marker icon
    var redIcon = L.icon({
        iconUrl: 'images/map-pointer.png',
        iconSize: [30, 40], // size of the icon
        iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
        popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-shadow.png',
        shadowSize: [20, 20] // size of the shadow
    });

    // Initialize slider
    var bannerSlider = new Swiper('.bannerSlider', {
        slidesPerView: 1,
        spaceBetween: 0,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: false
    });

    // Add markers
    locations.forEach(function (location, index) {
        var marker = L.marker(location.coords, { icon: redIcon })
            .addTo(map)
            .bindTooltip(location.title);

        marker.on('click', function () {
            // Show popup
            document.getElementById('popup').classList.add('show');

            // Populate slider with content
            var bannerSliderSwiper = document.querySelector('.bannerSlider .swiper-wrapper');
            bannerSliderSwiper.innerHTML = ''; // Clear existing slides
            bannerSliderSwiper.innerHTML = `
                        <div class='swiper-slide'>${location.details}</div>
                    `;

            // Reinitialize slider
            bannerSlider.update();
            bannerSlider.slideTo(0);
        });
    }); 
});